<tabset class="tabs-top">

  <tab select="onTabSelect()">
    <tab-heading>
      {{'home.detailPane.badRecords' | translate}} <span class="badge alert-danger">{{ errorRecordsCount.count | abbreviateNumber}}</span>
    </tab-heading>
    <div class="tabs-content">
      <div class="row">
        <div class="col-sm-8" ng-if="stageBadRecords && stageBadRecords.length > 0">

          <div class="panel panel-default">
            <div class="panel-heading">
              <span translate="home.detailPane.badRecordsTab.mostRecentBadRecords">Most Recent Bad Records</span>
              <i class="fa fa-refresh pointer icon-button"
                 ng-click="refreshBadRecordsData()"
                 tooltip-placement="right"
                 tooltip="{{'global.form.refresh' | translate}}"></i>
            </div>
            <div class="panel-body">
              <table class="table">
                <thead>
                <tr>
                  <th class="col-md-4">
                    <!--span class="glyphicon glyphicon-expand pointer"
                      ng-if="!expandAllErrorData"
                      ng-click="onExpandAllErrorData()"></span>
                    <span class="glyphicon glyphicon-collapse-down pointer"
                      ng-if="expandAllErrorData"
                      ng-click="onCollapseAllErrorData()"></span-->
                    <span translate="home.detailPane.badRecords">Bad Records</span>
                  </th>
                  <th class="col-md-3" translate="global.form.timestamp">Timestamp</th>
                  <th class="col-md-5" translate="global.form.errorMessage"> Error Message</th>
                </tr>
                </thead>
                <tbody ng-hide="showBadRecordsLoading">
                <tr ng-repeat="errorRecord in stageBadRecords">
                  <td>
                    <record-tree
                      record="errorRecord"
                      record-value="errorRecord.value"
                      field-name="('global.form.record' | translate)+($index+1)"
                      is-root="true"
                      is-error="true"
                      show-header="true"
                      show-field-type="true">
                      editable="false">
                    </record-tree>
                  </td>
                  <td>{{errorRecord.header.errorTimestamp | date:'medium'}}</td>
                  <td ng-bind="errorRecord.header.errorMessage"></td>
                </tr>

                </tbody>

              </table>
              <div show-loading="showBadRecordsLoading"></div>
            </div>
          </div>
        </div>


        <div class="col-sm-4">
          <div class="panel panel-default">
            <div class="panel-heading" translate="home.detailPane.badRecordsTab.badRecordsHistogram">Bad Records Histogram</div>
            <div class="panel-body">

              <ul class="properties">
                <li>
                  <span class="properties-label" translate="home.detailPane.badRecordsTab.totalNumberOfBadRecords">Total Number of Bad Records</span>
                  <span class="properties-value">{{errorRecordsCount.count}}</span>
                </li>
              </ul>

              <nvd3 ng-if="errorDataLoaded" options="percentilesChartOptions" data="errorRecordsPercentilesData"
                    config="{ refreshDataOnly: true }"></nvd3>

            </div>
          </div>
        </div>
      </div>
    </div>
  </tab>


  <tab select="onTabSelect()">
    <tab-heading>
      {{'global.form.stageErrors' | translate}} <span class="badge alert-danger">{{errorMessagesCount.count | abbreviateNumber}}</span>
    </tab-heading>

    <div class="tabs-content">

      <div class="row">

        <div class="col-sm-8" ng-if="errorMessages && errorMessages.length > 0">

          <div class="panel panel-default">
            <div class="panel-heading">
              <span translate="home.detailPane.badRecordsTab.mostRecentErrorMessages">Most Recent Error Messages</span>
              <i class="fa fa-refresh pointer icon-button"
                 ng-click="refreshErrorMessagesData()"
                 tooltip-placement="right"
                 tooltip="{{'global.form.refresh' | translate}}"></i>
            </div>
            <div class="panel-body">
              <table class="table table-hover">
                <thead>
                <tr>
                  <th class="col-md-3" translate="global.form.timestamp">Timestamp</th>
                  <th class="col-md-2" translate="global.form.errorCode">Error Code</th>
                  <th class="col-md-7" translate="global.form.errorMessage"> Error Message</th>
                </tr>
                </thead>
                <tbody ng-hide="showErrorMessagesLoading">
                <tr ng-repeat="errorMessage in errorMessages">
                  <td>{{errorMessage.timestamp | date:'medium'}}</td>
                  <td ng-bind="errorMessage.errorCode"> </td>
                  <td>
                  <i class="fa fa-info-circle help-icon"
                     ng-class="fa-info-circle"
                     ng-if="errorMessage.antennaDoctorMessages && errorMessage.antennaDoctorMessages.length > 0"
                     tooltip-placement="right"
                     tooltip-append-to-body="false"
                     tooltip="{{errorMessage.antennaDoctorMessages[0].summary}}"
                     tooltip-trigger="mouseenter">
                   </i>                     
                   <span ng-bind="errorMessage.localized"></span>
                    <a class="view-stack-trace"
                       ng-if="errorMessage.errorStackTrace"
                       ng-click="showStackTrace(errorMessage)">
                      ( <span translate="home.graphPane.viewStackTrace">View Stack Trace</span>... )
                    </a>
                  </td>
                </tr>
                </tbody>
              </table>

              <div show-loading="showErrorMessagesLoading"></div>
            </div>
          </div>

        </div>


        <div class="col-sm-4">

          <div class="panel panel-default">
            <div class="panel-heading" translate="home.detailPane.badRecordsTab.errorsHistogram">Errors Histogram</div>
            <div class="panel-body">

              <ul class="properties">
                <li>
                  <span class="properties-label" translate="home.detailPane.badRecordsTab.totalNumberOfErrors">Total Number of Errors</span>
                  <span class="properties-value">{{errorMessagesCount.count}}</span>
                </li>
              </ul>

              <nvd3 ng-if="errorDataLoaded" options="percentilesChartOptions" data="errorsPercentilesData"
                    config="{ refreshDataOnly: true }"></nvd3>

            </div>
          </div>
        </div>
      </div>

    </div>
  </tab>

</tabset>
